import React, { Component } from 'react'
import myaxios from '../../utils/myaxios'
import { NavBar, Icon, Tabs, Toast } from 'antd-mobile'
import './GoodList.scss'
import SearchInput from '../searchInput/SearchInput'
import emptyProduct from '../../assets/images/empty_product.jpg'
import './GoodList.scss'

export default class GoodList extends Component {
    constructor(props) {
        super(props);
        // 列表的引用
        this.goodListRef = React.createRef();
        this.pagesize = 10;  /* 默认返回的每条请求的数量 */
        this.pagenum = 1;
    }
    state = {
        tabs: [{ title: '综合' }, { title: '销量' }, { title: '价格' }],
        goods: [],
    }

    componentDidMount() {
        console.log(this.props.location.search);
        let { search } = this.props.location;
        let params = search.split('?')[1] || '';
        let params_arr = params.split('=');
        if (params_arr[0] === 'cid') {
            this.cid = params_arr[1];
        } else if (params_arr[0] === 'query') {
            this.query = params_arr[1];
        }
        this.getProductList();
        // 注册滚动监听的时间
        this.goodListRef.current.parentElement.addEventListener('scroll', this.handleScroll)
    }
    handleScroll = () => {
        console.log('列表开始滚动啦');
        let parentElement = this.goodListRef.current.parentElement;
        // 客户端高度 clientHeight
        let clientHeight = parentElement.clientHeight;
        // 列表的高度
        let scrollHeight = parentElement.scrollHeight;
        // 列表已经滚动的高度
        let scrollTop = parentElement.scrollTop;
        // 如果结果小于或等于1 说明已经触底
        if (scrollHeight - clientHeight - scrollTop <= 1) {
            console.log('触底啦');
            this.getProductList();
        }
    }

    // 卸载监听事件
    componentWillUnmount() {
        this.goodListRef.current.parentElement.removeEventListener('scroll', this.handleScroll)
    }


    // 获取产品列表
    getProductList = () => {
        // 拼接的参数
        let params = {};
        if (this.cid) {
            params['cid'] = this.cid;
        }
        if (this.query) {
            params['query'] = decodeURIComponent(this.query);
        }

        // 如果页码存在
        if(this.total) params['pagenum'] = ++this.pagenum;
        else params['pagenum'] = this.pagenum;
        // 默认页码
        params['pagesize'] = this.pagesize;
        // 如果当前页码大于总的页面
        if(this.pagenum > Math.ceil(this.total / this.pagesize)){
            Toast.info('已经是最后一条数据了！',1);
        }else{
            myaxios
            .get('goods/search', {
                params: params,
            })
            .then((res) => {
                console.log(res);
                this.total = res.total;
                this.pagenum = res.pagenum;
                this.setState({
                    // 追加数据
                    goods: [...this.state.goods,...res.goods],
                })
            }
            )
            .catch((err) => {
                console.log(err);
            }
            )
        }     
    }

    handleItemClick = (goods_id) => {
        this.props.history.push('/goodDetail/' + goods_id);
    }


    render() {
        return (
            <div className='yg-gl'>
                {/* 导航栏 */}
                <div className="yg-gl-nav">
                    <NavBar
                        className="gl-nav"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >
                        商品列表
                    </NavBar>
                </div>
                {/* 导航栏 */}
                {/* 商品搜索框 */}
                <div className="yg-gl-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 商品搜索框 */}
                {/* tab切换栏 */}
                <div className="yg-gl-tab">
                    <Tabs tabs={this.state.tabs} initialPage={0}
                        onChange={(tab, index) => {
                            console.log('onChange', index, tab);
                        }}
                        onTabClick={(tab, index) => {
                            console.log('onTabClick', index, tab);
                        }}
                        tabBarUnderlineStyle={{ borderColor: 'red' }}
                        tabBarTextStyle={{ color: 'black', fontWeight: '200' }}
                    >
                        <div className='gl-tab-zh' ref={this.goodListRef}>
                            {this.state.goods.map((v, index) => {
                                return (
                                    <div className="tab-zh-item" key={v.goods_id} onClick={this.handleItemClick.bind(this, v.goods_id)}>
                                        <div className="zh-item-left">
                                            <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                                        </div>
                                        <div className='zh-item-right'>
                                            <div className="zh-right-top">{v.goods_name}</div>
                                            <div className="item-right-bottom">￥{v.goods_price}</div>
                                        </div>
                                    </div>
                                )
                            })
                            }
                        </div>
                        <div style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            height: "150px",
                            backgroundColor: "#fff",
                        }}>
                            销量
                        </div>
                        <div style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            height: "150px",
                            backgroundColor: "#fff",
                        }}>
                            价格
                        </div>
                    </Tabs>
                </div>
                {/* tab切换栏 */}
            </div>
        )
    }
}
